* {margin:0; padding:0;}

body { background-color: #eee; padding-top: 50px;
  background-color: rgb(32, 59, 95);
}

@font-face
{
font-family: myfont;
src: url('/Users/william/Folders/MyFonts/RespectiveSlanted-JZqB.ttf');
}

h2 { text-align: center;
  text-shadow: 0em 0em 0.2em #fff, 0em 0.1em 0.2em #fcc, 0em -0.1em 0.2em #f80;
font: myfont;}

.container { position: relative;
  width:1000px;
  height:700px;
  margin:0px auto;
}

img { position: absolute;
  top:50px; 
  left:100px;
  cursor: pointer;
  padding:10px 10px 25px;
  background-color: #fff;
  border: 1px solid #999;
  transition:0.5s;        /*compatibility*/
  -moz-transition:0.5s;
  -webkit-transition:0.5s;
  box-shadow: 3px 3px 3px #ccc;
  transition-property: all;
}

img:hover {transform: rotate(0deg);-moz-transform: rotate(0deg);-webkit-transform: rotate(0deg);
  transform: scale(1.2); -moz-transform: scale(1.2); -webkit-transform: scale(1.2);
  box-shadow: 6px 6px 6px #545454;
  border: 1px solid #333;
  z-index: 3;
}

.img1 { left:40px; top:20px; transform: rotate(20deg);-moz-transform: rotate(20deg);-webkit-transform: rotate(20deg);z-index: 1;}
.img2 { left:156px; top:156px; transform: rotate(-20deg); -moz-transform: rotate(-20deg); -webkit-transform: rotate(-20deg); z-index: 1;}
.img3 { left:381px; top:60px; transform: rotate(20deg); -moz-transform: rotate(20deg); -webkit-transform: rotate(20deg); z-index: 1;}
.img4 { left:458px; top:256px; transform: rotate(20deg); -moz-transform: rotate(20deg); -webkit-transform: rotate(20deg); z-index: 1;}
.img5 { left:684px; top:110px; transform: rotate(-20deg); -moz-transform: rotate(-20deg); -webkit-transform: rotate(-20deg); z-index: 1;}
.img6 { left:30px; top:280px; transform: rotate(-10deg); -moz-transform: rotate(-10deg); -webkit-transform: rotate(-10deg); z-index: 1;}
